<template>
  <el-dialog
    ref="dialogRef"
    v-model="dialogVisible"
    :title="title"
    :top="top"
    :width="width"
    :append-to-body="appendToBody"
    :destroy-on-close="destroyOnClose"
    @close="handleClose"
  >
    <template #header="row">
      <slot name="header" :row="row"></slot>
    </template>
    <slot></slot>
    <div v-if="isButton" class="h-[40px] flex justify-center items-center">
      <el-button type="primary" :loading="loading" @click="handleSubmit">{{
        confirmText
      }}</el-button>
      <el-button @click="close">{{ cancleText }}</el-button>
    </div>
    <slot name="footer"></slot>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";

defineProps({
  title: {
    type: String,
    default: "新增"
  },
  top: {
    type: String,
    default: "15vh"
  },
  width: {
    type: String,
    default: "50%"
  },
  confirmText: {
    type: String,
    default: "确认"
  },
  cancleText: {
    type: String,
    default: "取消"
  },
  appendToBody: {
    type: Boolean,
    default: false
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  isButton: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(["submit", "close", "hasedClosed"]);

// 弹窗
const dialogVisible = ref(false);
// 弹窗ref
const dialogRef = ref();

// 打开
const open = () => (dialogVisible.value = true);
// 关闭
const close = () => (dialogVisible.value = false);

const loading = ref(false);
const showLoading = () => (loading.value = true);
const hideLoading = () => (loading.value = false);
//关闭时回调
const handleClose = () => emit("hasedClosed");
// 提交
const handleSubmit = () => emit("submit");

defineExpose({ dialogRef, open, close, showLoading, hideLoading });
</script>
<style scoped lang="scss"></style>
